
import React from "react";
import Link from 'next/link';

const links = [
  {
    name: "南宁市",
    url: "/baoming/guangxishi/guangxi",
  },
  {
    name: "柳州市",
    url: "/baoming/guangxishi/guangxi",
  },
  {
    name: "桂林市",
    url: "/baoming/guangxishi/guangxi",
  },
  {
    name: "梧州市",
    url: "/baoming/guangxishi/guangxi",
  },
  {
    name: "北海市",
    url: "/baoming/guangxishi/guangxi",
  },
  {
    name: "防城港市",
    url: "/baoming/guangxishi/guangxi",
  },
  {
    name: "钦州市",
    url: "/baoming/guangxishi/guangxi",
  },
  {
    name: "贵港市",
    url: "/baoming/guangxishi/guangxi",
  },
  {
    name: "玉林市",
    url: "/baoming/guangxishi/guangxi",
  },
  {
    name: "百色市",
    url: "/baoming/guangxishi/guangxi",
  },
  {
    name: "贺州市",
    url: "/baoming/guangxishi/guangxi",
  },
  {
    name: "河池市",
    url: "/baoming/guangxishi/guangxi",
  },
  {
    name: "来宾市",
    url: "/baoming/guangxishi/guangxi",
  },
  {
    name: "崇左市",
    url: "/baoming/guangxishi/guangxi",
  },

];

export default function FriendlyLinks() {

  return (
    <section className="py-12 bg-[#F5F5F5]">
      <div className="container mx-auto px-4">
     
        {/* <button className="text-xl ml-2 px-2 py-1 font-semibold text-red  transition-colors">◀广东</button> */}
        {/* 学员信息查询按钮 - 右上角 */}
        <button className="absolute top-30 right-4 bg-red-600 hover:bg-red-800 text-white text-sm px-3 py-1 rounded transition-colors ">
          学员信息查询进入
          <br />
          <span className="text-xs">(省/市/班主任有权进入)</span>
        </button>
        <h2 className="text-3xl font-bold text-center mb-1 text-red-600 ">广西省网络主播合规培训报名入口</h2>
        {/* <p className=" text-left mb-1 text-red-600 ">学员信息查询进入（省，市，班主任（招生老师）有权进入）</p> */}
        <p className="text-xl text-center mb-4 text-red-600 mt-4">请参加培训的学员，按照所在地级市报名，并写明招生老师或班主任的姓名</p>
        {/* 红色分割线 */}
        {/* <div className="border-b-2 border-[#DB2626] mt-8"></div> */}
        <div className="overflow-x-auto mt-8">
          <table className="w-full text-center">
            <tbody>
              {/* 每行显示 5 个链接 */}
              {[...Array(Math.ceil(links.length / 11))].map((_, rowIndex) => (
                <tr key={rowIndex}>
                  {links.slice(rowIndex * 11, (rowIndex + 1) * 11).map((link, index) => (
                    <td key={index} className="px-2 py-1">
                      <Link
                        href={{
                          pathname: link.url,
                          query: {
                            city: encodeURIComponent(link.name)
                          }
                        }}
                        passHref
                        legacyBehavior
                      >
                        <a className="text-black hover:text-blue-800 transition-colors">
                          {link.name}
                        </a>
                      </Link>
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}
